import React, { useState, useEffect } from 'react';
import {
  Card,
  Row,
  Col,
  Select,
  DatePicker,
  Button,
  Space,
  Typography,
  Statistic,
  Table,
  Tag,
  Progress,
  Tabs,
  List,
  Avatar,
  Tooltip,
  Alert,
  Divider,
  Radio
} from 'antd';
import {
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  UserOutlined,
  DollarOutlined,
  TrophyOutlined,
  RiseOutlined,
  FallOutlined,
  ReloadOutlined,
  DownloadOutlined,
  EyeOutlined,
  TeamOutlined,
  ShoppingOutlined,
  BankOutlined,
  CalendarOutlined,
  SafetyOutlined,
  WarningOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Title, Text } = Typography;
// const { TabPane } = Tabs; // Deprecated, using items instead

interface UserAnalysisData {
  totalUsers: number;
  newUsers: number;
  activeUsers: number;
  retentionRate: number;
  avgAssets: number;
  userDistribution: {
    ageGroup: { label: string; value: number; percentage: number }[];
    riskLevel: { label: string; value: number; percentage: number }[];
    region: { label: string; value: number; percentage: number }[];
  };
  topUsers: {
    id: string;
    name: string;
    email: string;
    assets: number;
    return: number;
    returnRate: number;
    joinDate: string;
  }[];
}

interface ProductAnalysisData {
  totalProducts: number;
  onlineProducts: number;
  totalSales: number;
  avgReturn: number;
  productPerformance: {
    id: string;
    name: string;
    code: string;
    category: string;
    sales: number;
    return: number;
    subscribers: number;
    rating: number;
  }[];
  categoryDistribution: {
    category: string;
    count: number;
    sales: number;
    percentage: number;
  }[];
}

interface TransactionAnalysisData {
  totalTransactions: number;
  totalVolume: number;
  avgTransactionSize: number;
  successRate: number;
  dailyTransactions: {
    date: string;
    count: number;
    volume: number;
  }[];
  transactionTypes: {
    type: string;
    count: number;
    volume: number;
    percentage: number;
  }[];
}

interface RiskAnalysisData {
  totalRiskEvents: number;
  highRiskPortfolios: number;
  avgRiskScore: number;
  riskDistribution: {
    level: string;
    count: number;
    percentage: number;
  }[];
  riskEvents: {
    id: string;
    type: string;
    level: string;
    description: string;
    portfolioId: string;
    userName: string;
    createdAt: string;
    status: string;
  }[];
}

const DataAnalysis: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().subtract(30, 'day'),
    dayjs()
  ]);
  const [activeTab, setActiveTab] = useState('user');
  const [timeGranularity, setTimeGranularity] = useState<'day' | 'week' | 'month'>('day');
  
  // 分析数据状态
  const [userAnalysis, setUserAnalysis] = useState<UserAnalysisData | null>(null);
  const [productAnalysis, setProductAnalysis] = useState<ProductAnalysisData | null>(null);
  const [transactionAnalysis, setTransactionAnalysis] = useState<TransactionAnalysisData | null>(null);
  const [riskAnalysis, setRiskAnalysis] = useState<RiskAnalysisData | null>(null);

  // 加载数据
  useEffect(() => {
    loadAnalysisData();
  }, [dateRange, activeTab]);

  const loadAnalysisData = async () => {
    setLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 模拟用户分析数据
      const mockUserAnalysis: UserAnalysisData = {
        totalUsers: 12580,
        newUsers: 256,
        activeUsers: 8945,
        retentionRate: 78.5,
        avgAssets: 485000,
        userDistribution: {
          ageGroup: [
            { label: '18-25岁', value: 1580, percentage: 12.6 },
            { label: '26-35岁', value: 4520, percentage: 35.9 },
            { label: '36-45岁', value: 3890, percentage: 30.9 },
            { label: '46-55岁', value: 2100, percentage: 16.7 },
            { label: '55岁以上', value: 490, percentage: 3.9 }
          ],
          riskLevel: [
            { label: 'R1', value: 2516, percentage: 20.0 },
            { label: 'R2', value: 3774, percentage: 30.0 },
            { label: 'R3', value: 3774, percentage: 30.0 },
            { label: 'R4', value: 1887, percentage: 15.0 },
            { label: 'R5', value: 629, percentage: 5.0 }
          ],
          region: [
            { label: '北京', value: 2516, percentage: 20.0 },
            { label: '上海', value: 2264, percentage: 18.0 },
            { label: '深圳', value: 1887, percentage: 15.0 },
            { label: '广州', value: 1509, percentage: 12.0 },
            { label: '其他', value: 4404, percentage: 35.0 }
          ]
        },
        topUsers: [
          {
            id: 'user001',
            name: '张三',
            email: 'zhangsan@example.com',
            assets: 5000000,
            return: 450000,
            returnRate: 9.8,
            joinDate: '2023-01-15'
          },
          {
            id: 'user002',
            name: '李四',
            email: 'lisi@example.com',
            assets: 3200000,
            return: 280000,
            returnRate: 9.6,
            joinDate: '2023-03-20'
          },
          {
            id: 'user003',
            name: '王五',
            email: 'wangwu@example.com',
            assets: 2800000,
            return: 220000,
            returnRate: 8.5,
            joinDate: '2023-02-10'
          }
        ]
      };
      
      // 模拟产品分析数据
      const mockProductAnalysis: ProductAnalysisData = {
        totalProducts: 156,
        onlineProducts: 128,
        totalSales: 15600000000,
        avgReturn: 8.7,
        productPerformance: [
          {
            id: 'WM001',
            name: '稳健增长基金',
            code: 'WM001',
            category: '混合型',
            sales: 500000000,
            return: 9.2,
            subscribers: 1250,
            rating: 4.5
          },
          {
            id: 'WM003',
            name: '高收益股票基金',
            code: 'WM003',
            category: '股票型',
            sales: 800000000,
            return: 18.5,
            subscribers: 2100,
            rating: 4.8
          },
          {
            id: 'WM002',
            name: '保本理财产品',
            code: 'WM002',
            category: '货币型',
            sales: 200000000,
            return: 4.2,
            subscribers: 800,
            rating: 4.0
          }
        ],
        categoryDistribution: [
          { category: '股票型', count: 45, sales: 6240000000, percentage: 40.0 },
          { category: '混合型', count: 38, sales: 4680000000, percentage: 30.0 },
          { category: '债券型', count: 32, sales: 3120000000, percentage: 20.0 },
          { category: '货币型', count: 25, sales: 1560000000, percentage: 10.0 }
        ]
      };
      
      // 模拟交易分析数据
      const mockTransactionAnalysis: TransactionAnalysisData = {
        totalTransactions: 45680,
        totalVolume: 2340000000,
        avgTransactionSize: 51250,
        successRate: 98.5,
        dailyTransactions: Array.from({ length: 30 }, (_, i) => ({
          date: dayjs().subtract(29 - i, 'day').format('YYYY-MM-DD'),
          count: Math.floor(Math.random() * 2000) + 1000,
          volume: Math.floor(Math.random() * 100000000) + 50000000
        })),
        transactionTypes: [
          { type: '申购', count: 18272, volume: 936000000, percentage: 40.0 },
          { type: '赎回', count: 13704, volume: 702000000, percentage: 30.0 },
          { type: '转换', count: 9136, volume: 468000000, percentage: 20.0 },
          { type: '分红', count: 4568, volume: 234000000, percentage: 10.0 }
        ]
      };
      
      // 模拟风险分析数据
      const mockRiskAnalysis: RiskAnalysisData = {
        totalRiskEvents: 156,
        highRiskPortfolios: 23,
        avgRiskScore: 65.8,
        riskDistribution: [
          { level: '低风险', count: 7540, percentage: 60.0 },
          { level: '中等风险', count: 3770, percentage: 30.0 },
          { level: '高风险', count: 1258, percentage: 10.0 }
        ],
        riskEvents: [
          {
            id: 'risk001',
            type: '止损触发',
            level: 'high',
            description: '投资组合亏损超过10%阈值',
            portfolioId: 'portfolio001',
            userName: '张三',
            createdAt: '2024-01-15 14:30:00',
            status: 'handled'
          },
          {
            id: 'risk002',
            type: '集中度风险',
            level: 'medium',
            description: '单一产品持仓超过20%',
            portfolioId: 'portfolio002',
            userName: '李四',
            createdAt: '2024-01-15 10:15:00',
            status: 'pending'
          }
        ]
      };
      
      setUserAnalysis(mockUserAnalysis);
      setProductAnalysis(mockProductAnalysis);
      setTransactionAnalysis(mockTransactionAnalysis);
      setRiskAnalysis(mockRiskAnalysis);
    } catch (error) {
      console.error('加载分析数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 用户分析表格列
  const userColumns: ColumnsType<any> = [
    {
      title: '用户信息',
      key: 'userInfo',
      render: (_, record) => (
        <Space>
          <Avatar icon={<UserOutlined />} />
          <div>
            <div style={{ fontWeight: 500 }}>{record.name}</div>
            <div style={{ fontSize: 12, color: '#666' }}>{record.email}</div>
          </div>
        </Space>
      )
    },
    {
      title: '资产规模',
      dataIndex: 'assets',
      sorter: (a, b) => a.assets - b.assets,
      render: (assets: number) => (
        <span style={{ fontWeight: 500 }}>
          ¥{(assets / 10000).toFixed(1)}万
        </span>
      )
    },
    {
      title: '总收益',
      key: 'return',
      sorter: (a, b) => a.return - b.return,
      render: (_, record) => (
        <div>
          <div style={{ color: '#52c41a', fontWeight: 500 }}>
            +¥{(record.return / 10000).toFixed(1)}万
          </div>
          <div style={{ fontSize: 12, color: '#52c41a' }}>
            +{record.returnRate.toFixed(1)}%
          </div>
        </div>
      )
    },
    {
      title: '加入时间',
      dataIndex: 'joinDate',
      sorter: (a, b) => dayjs(a.joinDate).unix() - dayjs(b.joinDate).unix()
    },
    {
      title: '操作',
      key: 'actions',
      render: () => (
        <Button type="link" icon={<EyeOutlined />} size="small">
          查看详情
        </Button>
      )
    }
  ];

  // 产品分析表格列
  const productColumns: ColumnsType<any> = [
    {
      title: '产品信息',
      key: 'productInfo',
      render: (_, record) => (
        <div>
          <div style={{ fontWeight: 500 }}>{record.name}</div>
          <div style={{ fontSize: 12, color: '#666' }}>{record.code}</div>
          <Tag color="blue">{record.category}</Tag>
        </div>
      )
    },
    {
      title: '销售规模',
      dataIndex: 'sales',
      sorter: (a, b) => a.sales - b.sales,
      render: (sales: number) => (
        <span style={{ fontWeight: 500 }}>
          ¥{(sales / 100000000).toFixed(1)}亿
        </span>
      )
    },
    {
      title: '收益率',
      dataIndex: 'return',
      sorter: (a, b) => a.return - b.return,
      render: (returnRate: number) => (
        <span style={{ color: '#52c41a', fontWeight: 500 }}>
          {returnRate.toFixed(1)}%
        </span>
      )
    },
    {
      title: '用户数',
      dataIndex: 'subscribers',
      sorter: (a, b) => a.subscribers - b.subscribers,
      render: (count: number) => count ? count.toLocaleString() : '0'
    },
    {
      title: '评级',
      dataIndex: 'rating',
      sorter: (a, b) => a.rating - b.rating,
      render: (rating: number) => (
        <div>
          <Progress 
            percent={(rating / 5) * 100} 
            size="small" 
            format={() => rating.toFixed(1)}
            strokeColor="#52c41a"
          />
        </div>
      )
    }
  ];

  // 风险事件表格列
  const riskColumns: ColumnsType<any> = [
    {
      title: '风险类型',
      dataIndex: 'type',
      render: (type: string, record) => (
        <div>
          <Tag color={record.level === 'high' ? 'red' : record.level === 'medium' ? 'orange' : 'blue'}>
            {type}
          </Tag>
        </div>
      )
    },
    {
      title: '描述',
      dataIndex: 'description'
    },
    {
      title: '投资者',
      dataIndex: 'userName'
    },
    {
      title: '发生时间',
      dataIndex: 'createdAt'
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status: string) => (
        <Tag color={status === 'handled' ? 'green' : 'orange'}>
          {status === 'handled' ? '已处理' : '待处理'}
        </Tag>
      )
    }
  ];

  return (
    <div>
      {/* 页面标题和控制栏 */}
      <div style={{ marginBottom: 24 }}>
        <Row justify="space-between" align="middle">
          <Col>
            <Title level={3} style={{ margin: 0 }}>数据分析</Title>
          </Col>
          <Col>
            <Space>
              <RangePicker
                value={dateRange}
                onChange={(dates) => setDateRange(dates as [dayjs.Dayjs, dayjs.Dayjs])}
                format="YYYY-MM-DD"
              />
              <Radio.Group 
                value={timeGranularity} 
                onChange={(e) => setTimeGranularity(e.target.value)}
                size="small"
              >
                <Radio.Button value="day">日</Radio.Button>
                <Radio.Button value="week">周</Radio.Button>
                <Radio.Button value="month">月</Radio.Button>
              </Radio.Group>
              <Button icon={<ReloadOutlined />} onClick={loadAnalysisData}>
                刷新
              </Button>
              <Button icon={<DownloadOutlined />}>
                导出报告
              </Button>
            </Space>
          </Col>
        </Row>
      </div>

      {/* 分析标签页 */}
      <Tabs 
        activeKey={activeTab} 
        onChange={setActiveTab}
        items={[
          {
            key: 'user',
            label: <span><UserOutlined />用户分析</span>,
            children: (
              userAnalysis && (
                <div>
                  {/* 用户概览统计 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="总用户数"
                          value={userAnalysis.totalUsers}
                          prefix={<TeamOutlined />}
                          valueStyle={{ color: '#3f8600' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="新增用户"
                          value={userAnalysis.newUsers}
                          prefix={<UserOutlined />}
                          valueStyle={{ color: '#1890ff' }}
                          suffix={`(${((userAnalysis.newUsers / userAnalysis.totalUsers) * 100).toFixed(1)}%)`}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="活跃用户"
                          value={userAnalysis.activeUsers}
                          prefix={<EyeOutlined />}
                          valueStyle={{ color: '#cf1322' }}
                          suffix={`(${((userAnalysis.activeUsers / userAnalysis.totalUsers) * 100).toFixed(1)}%)`}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="平均资产"
                          value={userAnalysis.avgAssets / 10000}
                          precision={1}
                          prefix={<DollarOutlined />}
                          suffix="万"
                          valueStyle={{ color: '#722ed1' }}
                        />
                      </Card>
                    </Col>
                  </Row>

                  {/* 用户分布分析 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={8}>
                      <Card title="年龄分布" size="small">
                        <List
                          size="small"
                          dataSource={userAnalysis.userDistribution.ageGroup}
                          renderItem={(item) => (
                            <List.Item>
                              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <span>{item.label}</span>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                  <Progress percent={item.percentage} size="small" style={{ width: 60 }} />
                                  <span>{item.value}人</span>
                                </div>
                              </div>
                            </List.Item>
                          )}
                        />
                      </Card>
                    </Col>
                    <Col span={8}>
                      <Card title="风险偏好" size="small">
                        <List
                          size="small"
                          dataSource={userAnalysis.userDistribution.riskLevel}
                          renderItem={(item) => (
                            <List.Item>
                              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <span>{item.label}</span>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                  <Progress percent={item.percentage} size="small" style={{ width: 60 }} />
                                  <span>{item.value}人</span>
                                </div>
                              </div>
                            </List.Item>
                          )}
                        />
                      </Card>
                    </Col>
                    <Col span={8}>
                      <Card title="地区分布" size="small">
                        <List
                          size="small"
                          dataSource={userAnalysis.userDistribution.region}
                          renderItem={(item) => (
                            <List.Item>
                              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <span>{item.label}</span>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                  <Progress percent={item.percentage} size="small" style={{ width: 60 }} />
                                  <span>{item.value}人</span>
                                </div>
                              </div>
                            </List.Item>
                          )}
                        />
                      </Card>
                    </Col>
                  </Row>

                  {/* 高价值用户 */}
                  <Card title="高价值用户" size="small">
                    <Table
                      columns={userColumns}
                      dataSource={userAnalysis.topUsers}
                      rowKey="id"
                      size="small"
                      pagination={false}
                    />
                  </Card>
                </div>
              )
            )
          },
          {
            key: 'product',
            label: <span><ShoppingOutlined />产品分析</span>,
            children: (
              productAnalysis && (
                <div>
                  {/* 产品概览统计 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="产品总数"
                          value={productAnalysis.totalProducts}
                          prefix={<ShoppingOutlined />}
                          valueStyle={{ color: '#3f8600' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="在售产品"
                          value={productAnalysis.onlineProducts}
                          prefix={<RiseOutlined />}
                          valueStyle={{ color: '#1890ff' }}
                          suffix={`(${((productAnalysis.onlineProducts / productAnalysis.totalProducts) * 100).toFixed(1)}%)`}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="总销售额"
                          value={productAnalysis.totalSales / 100000000}
                          precision={1}
                          prefix={<DollarOutlined />}
                          suffix="亿"
                          valueStyle={{ color: '#cf1322' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="平均收益率"
                          value={productAnalysis.avgReturn}
                          precision={1}
                          prefix={<TrophyOutlined />}
                          suffix="%"
                          valueStyle={{ color: '#722ed1' }}
                        />
                      </Card>
                    </Col>
                  </Row>

                  {/* 产品表现 */}
                  <Card title="产品表现" size="small" style={{ marginBottom: 16 }}>
                    <Table
                      columns={productColumns}
                      dataSource={productAnalysis.productPerformance}
                      rowKey="id"
                      size="small"
                      pagination={false}
                    />
                  </Card>

                  {/* 产品分类分布 */}
                  <Card title="产品分类分布" size="small">
                    <List
                      grid={{ gutter: 16, column: 4 }}
                      dataSource={productAnalysis.categoryDistribution}
                      renderItem={(item) => (
                        <List.Item>
                          <Card size="small">
                            <div style={{ textAlign: 'center' }}>
                              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>{item.category}</div>
                              <div style={{ fontSize: 24, fontWeight: 'bold', color: '#1890ff', marginBottom: 8 }}>
                                {item.count}
                              </div>
                              <div style={{ fontSize: 12, color: '#666' }}>
                                销售额: ¥{(item.sales / 100000000).toFixed(1)}亿
                              </div>
                              <Progress percent={item.percentage} size="small" style={{ marginTop: 8 }} />
                            </div>
                          </Card>
                        </List.Item>
                      )}
                    />
                  </Card>
                </div>
              )
            )
          },
          {
            key: 'transaction',
            label: <span><BankOutlined />交易分析</span>,
            children: (
              transactionAnalysis && (
                <div>
                  {/* 交易概览统计 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="交易总数"
                          value={transactionAnalysis.totalTransactions}
                          prefix={<BankOutlined />}
                          valueStyle={{ color: '#3f8600' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="交易总额"
                          value={transactionAnalysis.totalVolume / 100000000}
                          precision={1}
                          prefix={<DollarOutlined />}
                          suffix="亿"
                          valueStyle={{ color: '#1890ff' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="平均交易额"
                          value={transactionAnalysis.avgTransactionSize / 10000}
                          precision={1}
                          prefix={<CalendarOutlined />}
                          suffix="万"
                          valueStyle={{ color: '#cf1322' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="成功率"
                          value={transactionAnalysis.successRate}
                          precision={1}
                          prefix={<TrophyOutlined />}
                          suffix="%"
                          valueStyle={{ color: '#722ed1' }}
                        />
                      </Card>
                    </Col>
                  </Row>

                  {/* 交易类型分布 */}
                  <Card title="交易类型分布" size="small">
                    <List
                      grid={{ gutter: 16, column: 3 }}
                      dataSource={transactionAnalysis.transactionTypes}
                      renderItem={(item) => (
                        <List.Item>
                          <Card size="small">
                            <div style={{ textAlign: 'center' }}>
                              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>{item.type}</div>
                              <div style={{ fontSize: 20, fontWeight: 'bold', color: '#1890ff', marginBottom: 4 }}>
                                {item.count}
                              </div>
                              <div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
                                金额: ¥{(item.volume / 100000000).toFixed(1)}亿
                              </div>
                              <Progress percent={item.percentage} size="small" />
                            </div>
                          </Card>
                        </List.Item>
                      )}
                    />
                  </Card>
                </div>
              )
            )
          },
          {
            key: 'risk',
            label: <span><SafetyOutlined />风险分析</span>,
            children: (
              riskAnalysis && (
                <div>
                  {/* 风险概览统计 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="风险事件"
                          value={riskAnalysis.totalRiskEvents}
                          prefix={<SafetyOutlined />}
                          valueStyle={{ color: '#cf1322' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="高风险组合"
                          value={riskAnalysis.highRiskPortfolios}
                          prefix={<WarningOutlined />}
                          valueStyle={{ color: '#fa8c16' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="平均风险评分"
                          value={riskAnalysis.avgRiskScore}
                          precision={1}
                          prefix={<LineChartOutlined />}
                          valueStyle={{ color: '#1890ff' }}
                        />
                      </Card>
                    </Col>
                    <Col span={6}>
                      <Card>
                        <Statistic
                          title="风险控制率"
                          value={85.6}
                          precision={1}
                          prefix={<TrophyOutlined />}
                          suffix="%"
                          valueStyle={{ color: '#52c41a' }}
                        />
                      </Card>
                    </Col>
                  </Row>

                  {/* 风险分布 */}
                  <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                    <Col span={12}>
                      <Card title="风险等级分布" size="small">
                        <List
                          dataSource={riskAnalysis.riskDistribution}
                          renderItem={(item) => (
                            <List.Item>
                              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <span>{item.level}</span>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                  <Progress 
                                    percent={item.percentage} 
                                    size="small" 
                                    style={{ width: 100 }}
                                    strokeColor={item.level === '高风险' ? '#ff4d4f' : item.level === '中风险' ? '#faad14' : '#52c41a'}
                                  />
                                  <span>{item.count}个</span>
                                </div>
                              </div>
                            </List.Item>
                          )}
                        />
                      </Card>
                    </Col>
                    <Col span={12}>
                      <Card title="风险趋势" size="small">
                        <div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>
                          风险趋势图表
                        </div>
                      </Card>
                    </Col>
                  </Row>

                  {/* 风险事件列表 */}
                  <Card title="风险事件" size="small">
                    <Table
                      columns={riskColumns}
                      dataSource={riskAnalysis.riskEvents}
                      rowKey="id"
                      size="small"
                      pagination={{ pageSize: 10 }}
                    />
                  </Card>
                </div>
              )
            )
          }
        ]}
      />
    </div>
  );
};

export default DataAnalysis;